<template>
  <div>
    <!--查询表单-->
    <el-form label-position="right" size="small" :inline="true" label-width='90px' class="query-form">
      <el-button type="primary" icon="el-icon-circle-plus" size="small" @click="dialogAddVisible = true">新增</el-button>
    </el-form>

    <!--客户表格数据展示-->
    <el-table class="table" ref="table" :data="tableData"
        border style="width: 100%; margin-top: 20px;" :header-cell-style="{padding: 0,height: '34px'}"
      >
      <el-table-column prop="userId" sortable label="用户名"></el-table-column>
      <el-table-column prop="userCname" sortable label="姓名"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="delRole(scope.row.id, scope.$index)" size="mini" style="padding: 4px 6px;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--新增角色用户-->
    <el-dialog append-to-body title="新增角色用户" width="600px" @open="openAdd" @close="user=''" class="dialogAdd"
               :visible.sync="dialogAddVisible" :close-on-click-modal='false'>
      <el-form style="margin-right: 20px;" label-position="right" label-width="100px" size="small">
        <el-form-item label="用户" prop="user">
          <el-select v-model="user" size="small" filterable clearable placeholder="请输入员工姓名或工号">
                  <el-option
                      v-for="item in allStaff"
                      :key="item.id"
                      :label="item.cname + '(' + item.id + ')'"
                      :value="item.id + '/' + item.cname">
                      <span style="float: left">{{ item.cname + '(' + item.id + ')' }}</span>
                  </el-option>
              </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'RoleUser',
  props: {
    data: Array,
    name: String,
    loading: Boolean,
    roleId: String
  },
  data () {
    return {
      tableData: [],    //  当前页数据
    /************************新增角色成员********************* */
      user: '',                 //  新增用户id/cname
      dialogAddVisible: false,    //  新增模态框
      allStaff: [],               //  所有员工
    }
  },
  watch: {
   'roleId': function (n, o) {
     console.log(this.roleId)
     this.getData()
   }
  },
  mounted(){
    console.log(this.roleId)
    this.getData()
  },
  activated(){
    console.log(333333)
  },

  methods: {
    getData(){
      this.$post("/api/RoleMemberController/getList",{roleId: this.roleId}, (data) => {
        this.tableData = data.list;
      })
    },
    //  删除角色用户
    delRole(id, index){
      this._confirm('确定删除吗?', () => {
        this.$post('/api/RoleMemberController/delOne', {id: id}, (data) => {
          this.$message.success("删除成功！")
          this.tableData.splice(index, 1)
        })
      })
    },
  /******************新增***************** */
    //  获取所有员工
    getAllStaff(){
      if(this.allStaff.length > 0) return
      let params = {}
      params.currentPage = 1
      params.queryForm = {}
      params.prop = 'id'
      params.order = 1
      this.$post("/api/UserController/getList",params, (data) => {
        this.allStaff = data.list;
      })
    },
    // 打开新增模态框
    openAdd(){
      this.getAllStaff()
    },
    // 确定新增
    add(){
      if(!this.user){
        this.$message.error("请选择用户！")
        return
      }
      this.$post("/api/RoleMemberController/add", {userId: this.user.split('/')[0], roleId: this.roleId}, (data) => {
        this.$message.success("添加成功！")
        this.dialogAddVisible = false
        let item = {
          id: data.rm.id,
          userId: data.rm.userId,
          userCname: this.user.split('/')[1],
        }
        this.tableData.push(item)
      })
    },
  }
}
</script>

<style lang="less" scoped>
  #roleUser{
    display: flex;
    height: 100%;
    .left{
      width: 150px;
      font-size: 14px;
      border-right: 2px solid #ddd;
      border-top: 2px solid #ddd;
      background: #f2f2f2;
      li{
        padding-left: 20px;
        line-height: 36px;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
        &.active{
          background: #fff;
        }
      }
    }
    .right{
      flex: 1;
      padding-left: 20px;
    }
  }
  .dialogAdd {
    .el-input, .el-cascader, .el-select, .el-textarea {
      width: 400px;
    }
  }
</style>

